
import React, { memo } from 'react'
import StudyModel from '@models/studyModel'
// @ts-ignore
import Styles from './index.scss'
// @ts-ignore
import FormIcon from '../../../icons/form.svg'
import { Card, WingBlank, Button, WhiteSpace } from 'antd-mobile';
import WImage from '@components/global/image'
import Router from 'next/router'

interface PropsInterface {
  models: StudyModel[],
  show: string
}
// @ts-ignore
const Study = (props: PropsInterface) => {

  return (
    <WingBlank size="sm" className={Styles['com-me-study']}>
      <Card>
        <Card.Header
          title={<span className={Styles['title']}>学习总结</span>}
          extra={<Button onClick={ () => Router.push('/conclusion') } size="small" type="primary" inline>查看全部</Button>}
        />
        <Card.Body>
          <div className={Styles['detail-text']}>{props.show}</div>
          <WhiteSpace />
          <div className={Styles['list']}>
            {
              props.models.map((item) => {
                return (
                  <WImage
                    toPath={ `/conclusion/study/detail?id=${item._id}` }
                    key={ item._id }
                    className={Styles['item']}
                    url={item.pic}
                    width={175}
                    height={175} />
                )
              })
            }
          </div>
        </Card.Body>
      </Card>
    </WingBlank>
  )
}

export default memo(Study)